require(["config"],function(){
    require(["jquery", "artTemplate","cookie","tools"], function ($, template) {
        class CartPage{
            constructor(){
            this.cart = []
            $.cookie.json = true//自动转换cookie值
            this.loadCart();
            this.render();
            this.bindEventListener();
        }
        loadCart(){
            this.cart = $.cookie("cart") || []
            
        }
        //渲染购物车商品布局
        render(){
           
            const html = template("cart-template",{cart:this.cart})
            $(".container-lis").html(html);
            //计算合计金额
            const total = this.cart.reduce((result,item) =>{
                if(item.checked){
                    result += Number(item.nowprice) * Number(item.amount);
                }
               return result
            },0)
            const _total = total.toFixed(2);  
            $(".shop-total").html(_total);
            const len = this.cart.length;
            const check_num = $(".select-one:checked").length;
            $(".shop-number").html(check_num);
            $.cookie("cart",this.cart,{path:'/',expires:10})
            //全选
            $(".select-all").prop("checked",$(".select-one:checked").length === len)
        }
        //通过删除数组元素来实现
        removeFromCart(e){
            const id = $(e.target).parents(".single").data("id");
            this.cart = this.cart.filter(item => item.id !==id);
            this.render();
        }
        modifyAmount(e){
            //修改数据数据，重新渲染
            const src = $(e.target);
            const id = src.parents(".single").data("id");
            this.cart.forEach(item => {
                if(item.id === id){
                    if(src.is(".add")){
                        item.amount += 1;
                    }else if (src.is(".cut")){
                        if( item.amount > 1 ){
                           item.amount -= 1;
                        }
                       
                    }else if(src.is(".amount")){
                        const _amount = src.val();
                        if (!/^\+?[1-9][0-9]*$/.test(_amount)) {
                            console.log('数量格式有误')
                          } else {
                            item.amount = Number(_amount)
                          }
                    }
                }
            })
            this.render();
        }
        handleCheckAll(e){
            const checked = $(e.target).prop("checked");
            //设置所有购物车商品选中状态与全选框一致
            this.cart.forEach(item => item.checked = checked);
            //重新渲染
            this.render();
        }
        //处理商品行前的选中
        handleCheckParts(e){
            //修改当前行数据的选中状态
            const id = $(e.target).parents(".single").data("id");
            this.cart.forEach(item => {
                if (item.id === id){
                    if(item.id === id){
                        item.checked = $(e.target).prop("checked")
                    }
                }
            })
            this.render();
        }
        //删除选中行
        handleRemoveChecked(){
                this.cart = this.cart.filter(item => item.checked !== true)
                console.log(this.cart);
                this.render();
        }
        bindEventListener() {
            // 删除
            $('.container-lis').on('click', '.btn-remove', this.removeFromCart.bind(this))
    
            // 数量修改
            $('.container-lis').on('click', '.add, .cut', this.modifyAmount.bind(this))
            $('.container-lis').on('blur', '.amount', this.modifyAmount.bind(this))
    
            // 全选
            $('.select-all').on('change', this.handleCheckAll.bind(this))
    
            // // 商品行前的选中
            $('.container-lis').on('change', '.select-one', this.handleCheckParts.bind(this))
    
            // // 删除选中
            $('.action-bar .del').on('click', this.handleRemoveChecked.bind(this))
    
          }
        }
        new CartPage();
    })
})